import React, { Component } from 'react';
import { Icon, message } from 'antd';
import _ from 'lodash';
import TitleItem from '../../components/TitleItem';
import { EditCheckbox, EditSelect } from '../../components/EditComponent';

const styles = {
	wrapItem: {
		display: 'flex',
		flexDirection: 'column',
		paddingLeft: '8px'
	},
	item: {
		marginBottom: '6px',
		color: '#a7a7a7'
	},
	save: {
		marginLeft: '10px'
	}
}

class TaskRemind extends Component {

	state = {
		edit: false,
		aheads: [],
		repeattype: 1
	}

	componentWillMount() {
		const { create } = this.props;
		if (create) return;
		this.setBaseValue(this.props.detailData.reminders);
	}

	componentWillReceiveProps(nextProps) {
		const { create } = this.props;
		if (create) return;
		this.setBaseValue(nextProps.detailData.reminders);
	}

	setBaseValue(reminders = []) {
		const repeattype = reminders[0] ? reminders[0].repeattype : 1;
		const aheads = reminders.map(v => `${v.aheadtype}-${v.aheadvalue}`);
		this.setState({ repeattype, aheads });
	}

	onInfoEdit = () => {
		const { edit } = this.state;
		this.setState({ edit: !edit })
	}

	// 保存变更
	valueChange = (key) => (v) => {
		this.setState({ [key]: v });
	}

	getValue = () => {
		const { aheads, repeattype } = this.state;
		const params = aheads.length ? aheads.map(v => {
			const [aheadtype, aheadvalue] = v.split('-');
			return {
				recid: '',
				repeattype: repeattype ? String(repeattype) : repeattype,
				aheadtype,
				aheadvalue
			}
		}) : [];
		return params;
	}

	// 取消编辑恢复默认值
	onCancelEdit = () => {
		this.setBaseValue(this.props.detailData.reminders);
		this.setState({ edit: false });
	}

	onSave = () => {
		const params = this.getValue();
		if (!params.length) {
			message.warn('请设置提前时间');
			return;
		}
		if (!params[0].repeattype) {
			message.warn('请设置提醒频率');
			return;
		}
		const { detailData: { info: { recid: taskid } }, save } = this.props;
		save({
			taskid,
			reminders: params,
		}, () => {
			this.setState({ edit: false });
		});
	}

	render() {
		const { edit, repeattype, aheads } = this.state;
		// disabled 只有整个组件作为展示的时候才会引入
		const { create, repeatList, aheadList, disabled, detailData = {} } = this.props;
		// create 表示创建任务
		const isEdit = create || edit;
		const isFinish = _.get(detailData, 'info.taskstatus') === 2;

		return (
			<>
				<TitleItem
					title="任务提醒"
					icon={
						!create && !disabled && !isFinish ? (
							edit ? [
								<span onClick={this.onCancelEdit} key="cancle">取消</span>,
								<span onClick={this.onSave} key="edit" style={styles.save}>保存</span>,
							] : <Icon type="edit" onClick={this.onInfoEdit} className="mainColor" />
						) : null
					}
					require={isEdit}
				/>
				<div style={styles.wrapItem}>
					<div style={styles.item}>
						提前:
                    <EditCheckbox
							options={aheadList}
							value={aheads}
							onChange={this.valueChange('aheads')}
							edit={isEdit}
						/>
					</div>
					<div style={styles.item}>
						频率:
                    <EditSelect
							placeholder="请选择频率"
							options={repeatList}
							value={repeattype}
							edit={isEdit}
							onChange={this.valueChange('repeattype')}
						/>
					</div>
				</div>
			</>
		);
	}
}

export default TaskRemind